<template>
  <view style="padding:30rpx;">
    <uni-forms ref="form" :modelValue="queryParams">
      <uni-forms-item label="订单编号" :labelWidth='85' name="orderCode">
        <uni-easyinput placeholder="请输入订单编号/交易流水号" v-model="queryParams.orderCode" />
      </uni-forms-item>
      <uni-forms-item label="桩编号" :labelWidth='85' name="orderCode">
        <uni-easyinput placeholder="请输入桩编号" v-model="queryParams.pileSn" />
      </uni-forms-item>
      <uni-forms-item label="开始时间" :labelWidth='85' name="orderCode">
        <uni-easyinput placeholder="请输入开始时间" v-model="queryParams.startTime" />
      </uni-forms-item>
      <uni-forms-item label="结束时间" :labelWidth='85' name="orderCode">
        <uni-easyinput placeholder="请输入结束时间" v-model="queryParams.endTime" />
      </uni-forms-item>
    </uni-forms>
    <button type="success" size="mini" @click="add">搜索</button>
    <button type="success" size="mini">重置</button>
    <view class="colorF" v-for="(item ,index) in abnormalRecordList" :index="index" :key="index">
      <view class="mainColor border-10" style="border: 1px solid #fff;">
        <view class="padding-10">订单编号：{{item.orderCode}}</view>
        <view class="padding-10">桩编码：{{item.pileSn}}</view>
        <view class="padding-10">枪口号：{{item.connectorCode}}</view>
        <view class="padding-10">开始时间：{{item.startTime}}</view>
        <view class="padding-10">结束时间：{{item.endTime}}</view>
        <view class="padding-10">总电量：{{item.totalElectricity}}</view>
        <view class="padding-10">消费金额：{{item.consumptionAmount}}</view>
        <view class="padding-10">停止原因：{{item.stopReasonMsg}}</view>
      </view>
    </view>
    <!-- 分页 -->
    <uni-pagination show-icon :page-size="queryParams.pageSize" :current="queryParams.pageNum" :total="total"
      @change="change" />
    <view class="btn-view;mainColor border-10">
      <view class="">
        <text
          class="example-info">当前页：{{ queryParams.pageNum }}，数据总量：{{ total }}条，每页数据：{{ queryParams.pageSize }}</text>
      </view>
      <view class="btn-flex ">
        <button class="button word-btn" hover-class="word-btn--hover" :hover-start-time="20" :hover-stay-time="70"
          @click="add"><text class="word-btn-white">增加10条数据</text></button>
        <button class="button" type="default" @click="reset" style="margin-left: 40rpx;">重置数据</button>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    listAbnormalRecord
  } from "@/api/order/abnormalRecord";

  import {
    copy
  } from "../../../common/copy";
  export default {
    data() {
      return {
        abnormalRecordList: [],
        total: 0,
        loading: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orderCode: null,
          pileSn: null,
          startTime: null,
          endTime: null,
        },
      }
    },
    created() {
      this.getList()
    },
    methods: {
      orderCopy(value) {
        copy(value)
      },
      changeFlag(info) {
        // console.log(info);
        updateStation(info).then((response) => {
          console.log(response, 'xiugai');
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      },
      add() {
        this.queryParams.pageSize += 10
        this.getList();
      },
      reset() {
        this.queryParams.pageSize = 10
        this.queryParams.pageNum = 1
        this.getList();
      },
      pileList(item, index) {
        console.log('首页点击', item, index);
      },
      submitForm(form) {
        var that = this
        this.$refs.form.validate().then(res => {
          console.log('表单数据信息', res);
          that.submitBatchAdd()
        }).catch(err => {
          console.log('表单错误信息', err);
        })
      },
      getModelList() {
        listModel().then((response) => {
          this.modelList = response.rows;
          console.log('型号列表', this.modelList);
        });
      },
      seleted(e) {
        this.checkList = e.detail.value
        console.log('点击', this.checkList);
        // console.log(this.abnormalRecordList[this.checkList].pileId);
        if (this.checkList.length === this.abnormalRecordList.length) {
          this.seletedAll = true
        }
      },
      seletedAl() {
        if (!this.seletedAll) {
          this.seletedAll = true
          console.log(this.seletedAll);
          this.abnormalRecordList.map(item => {
            this.checkList.push(item.value)
          })
        } else {
          this.seletedAll = false
          this.checkList = []
        }
      },
      bindTimeChange(e) {
        console.log('时间', e.detail.value);
        this.da.star_time = e.detail.value
      },
      checkStudent(e) {
        this.merchant = e.detail.value
        console.log(this.merchant);
      },
      getMerchantList() {
        getMerchantList().then((response) => {
          this.merchantList = response.rows;
          console.log('运营商', this.merchantList);
        });
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.$refs.popup.open()
        // this.reset();
        this.getMerchantList();
        this.getList()
        this.getDicts('software_protocol').then(response => {
          console.log('软件协议software_protocol', response.data);
          this.softwareProtocol = response.data
        })
        // this.title = "批量添加设备";
        // this.open = true;
      },
      hClose() {
        this.$refs.popup.close()
      },
      getCodeToText(codeStr, codeArray) {
        if (null === codeStr && null === codeArray) {
          return null;
        } else if (null === codeArray) {
          codeArray = codeStr.split(",");
        }
      },
      startMode(type) {
        startMode.then(res => {
          this.startModeList = res
        })
        let str = this.startModeList.find(item => {
          return item.dictValue == type
        })
        // console.log(str, 'str');
        if (str == undefined) {
          return '一'
        } else {
          return str.dictLabel
        }
      },
      payMode(type) {
        payMode.then(res => {
          this.payModeList = res
        })
        let str = this.payModeList.find(item => {
          return item.dictValue == type
        })
        if (str == null) {
          return '一'
        } else {
          return str.dictLabel
        }
      },
      payStatus(type) {
        payStatus.then(res => {
          this.payStatusList = res
        })
        let str = this.payStatusList.find(item => {
          return item.dictValue == type
        })
        if (str == null) {
          return '一'
        } else {
          return str.dictLabel
        }
      },
      getList() {
        listAbnormalRecord(this.queryParams).then((response) => {
          this.abnormalRecordList = response.rows;

          console.log(this.abnormalRecordList, response.total, "abnormalRecordList");
          this.total = response.total;
        });
      },
      // 多选处理
      selectedItems() {
        return this.selectedIndexs.map(i => this.tableData[i])
      },
      // 多选
      selectionChange(e) {
        console.log('多选', e.detail.index)
        this.selectedIndexs = e.detail.index
      },
      //批量删除
      delTable() {
        console.log(this.selectedItems())
      },
      // 分页触发
      change(e) {
        console.log(e.current);
        this.queryParams.pageNum = e.current
        this.getList()
      },
      // 搜索
      search() {
        this.getList(1, this.searchVal)
      }
    }
  }
</script>

<style>
</style>